<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <%@include file="../header.jsp" %>
 <style type="text/css">
 	.ui-progressbar{
 		width: 90%;
 		height: 22px;
 	}
 	.ui-progressbar-value{
 		background-image:  url("test.gif");
 	}
 </style>
</head>
<body>
	<p>
		<label for="value">进度条的值：</label><input class="ui-widget-content ui-corner-all" id="value" size="12">
		<button id="start">开始</button>
	</p>
	当前值：<span id="cur"></span>
	<div id="pro"></div>
	

<script type="text/javascript">
	$(function(){
		$("#start").button();
		$("#pro").progressbar({
			change:function(){
				var value=$(this).progressbar("option","value");
				$("#cur").text(value);
			}
		});
		$("#start").click(function(){
			$("#pro").progressbar("option","value",0);
			change();
		})
		function change(){
			var value=$("#pro").progressbar("option","value");
			value++;
			var id=0;
			if(value<=$("input#value").val()){
				id=setTimeout("change()", 100);
			}else{
				clearTimeout(id);
				return false;
			}
			$("#pro").progressbar("option","value",value);
		}
		
	})
</script>
</body>
</html>